<?php
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我的收藏</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <script src="/static/script/zepto.min.js"></script>
</head>
<body class="m-history">

<!-- 目前没有收藏类目-->
<!--<div class="nav" id="J_hisNav">-->
<!--    <a href="javascript:;" class="z-on" data-val="0">全部</a>-->
<!--    <a href="javascript:;" data-val="1">电器</a>-->
<!--    <a href="javascript:;" data-val="2">鞋类</a>-->
<!--</div>-->



<div class="list" id="J_hisList">
    <?php if(!empty($data)) { ?>
        <?php foreach ($data as $item) { ?>
            <div class="J_trans">
                <a href="/web/product/detail?pid=<?= $item['P_Id']?>"><img src="<?= $item['pic']?>" /></a>
                <h6>
                    <a href="/web/product/detail?pid=<?= $item['P_Id']?>"><?= $item['p_name'] ?></a>
                    <?php foreach ($item['attributes'] as $key => $val) { ?>
                        <?php if ($key != 'product_id') { ?>
                            <br><?= $key ?>:<?= $val ?>
                        <?php }
                    }
                    ?>
                </h6>
                <span>￥ <?= $item['price'] ?></span>
                <em data-id="<?= $item['ID'] ?>">删除</em>
            </div>
        <?php } ?>
    <?php } else {?>
        <h3 class="m-no-info">暂无收藏</h3>
    <?php }?>
</div>

<img class="m-loading" id="J_loading" src="/static/img/loading.gif" />


<script>

    function createList(info){

        var _list = '';
        for(var i in info){
            var _rs = info[i];
            _list += '<div class="J_trans">'+
                '<img src="'+ _rs['img'] +'">'+
                '<h6><a href="/web/product/detail?pid='+ i +'">'+ _rs['title'] +'</a><br>'+_rs['attr']+'</h6>'+
                '<span>￥ '+ _rs['price'] +'</span>'+
                '<em data-id="'+ i +'">删除</em>'+
                '</div>';
        }
        return _list;
    }

    $(function(){

        var list = $('#J_hisList'), zon = 'z-on';
        $('#J_hisNav').on('tap', 'a', function(){

            var _this = $(this);

            // 发送请求
            $.ajax({ url: 'ajax.fav.php?funcName=?', dataType:'jsonp', data:{'type':_this.attr('data-val')}, timeout:5000,

                success: function(_info){
                    console.log(_info);

                    list.html(createList(_info));
                }
            });

            _this.addClass(zon).siblings().removeClass(zon);
        });

        // 滑动删除[出现]
        var trans = 'z-trans';
        list.on('swipeLeft', 'div.J_trans', function(){

            var _this = $(this);

            if(_this.hasClass(trans)) return !1;

            list.find('div.J_trans').removeClass(trans);
            _this.addClass(trans);
        });

        // 滑动删除[隐藏]
        list.on('swipeRight', 'div.J_trans', function(){

            var _this = $(this);

            if(!_this.hasClass(trans)) return !1;

            _this.removeClass(trans);
        });

        // 点击删除
        list.on('touchend', 'em', function(evt){

            var _this = $(this), _id = _this.attr('data-id');

            // Id值
            console.log(_id);
            $.ajax({ url: '/web/collection/remove?funcName=?', dataType:'jsonp', data:{'id':_id}, timeout:5000,

                success: function(_info){
                    _this.closest('div').remove();
                }
            });
            evt.preventDefault();
            return false;
        });


        //分页
        var _loading = $('#J_loading');
        var forRun = document.getElementById('J_hisList');
        var start = 0, flag = true, page = 2, _ground = false;
        forRun.addEventListener('touchstart', function(ev){
            start = ev.touches[0].pageY;
            if(_ground){
                msgPopup("已是最后一页");
                return !1;
            }
        }, false);
        forRun.addEventListener('touchmove', function(ev){

            // 筛选栏显示与隐藏
            var end = ev.touches[0].pageY - start;

            if(end > 0){

                flag = true;
            }else{

                // 控制上拉加载
                if($(document).height() == ($(window).scrollTop() + $(window).height()) && flag){

                    // 加载锁定
                    flag = false;

                    var _val = 0
                    $('#J_hisList').each(function(i){

                        $(this).find('a').each(function(){
                            var _this = $(this);
                            if(_this.hasClass(zon)){
                                _val = _this.attr('data-val');
                                console.log(_val);
                            }

                        });
                    });


                    // 先显示 加载中...
                    _loading.css({display:'block'});

                    $.ajax({ url: '/web/collection/list?funcName=?', dataType:'jsonp', data:{'page': page,'per-page':8}, timeout:5000,

                        success: function(_info){

                            if(_info.length != 0){
                                page ++;
                            }else{
                                _ground = true;
                            }


                            // 请求成功后 隐藏 加载中...
                            _loading.css({display:'none'});


                            $('#J_hisList').append(createCollectionList(_info));

                            // 加载解锁
                            flag = true;
                        }
                    });

                }
            }

        }, false);
    });

    function createCollectionList(json){

        var _li = '';
        console.log(json);
        for(var i in json) {
            _li += '<div class="J_trans">' +
                '<a href="/web/product/detail?pid=' + json[i]['P_Id'] + '"><img src="' + json[i]['pic'] + '"/></a>'+
            '<h6>' +
            '<a href="/web/product/detail?pid=' + json[i]['P_Id'] + '">' + json[i]['p_name'] +'</a>';
            if(json[i]['attributes'].length != 0){
                for(var k in json[i]['attributes']) {
                    if(k != 'product_id'){
                        _li += '<br>' + k + ':' + json[i]['attributes'][k];
                    }
                }
            }
            _li += '</h6>' +
            '<span>￥ ' + json[i]['price'] + '</span>' +
            '<em data-id="' + json[i]['ID'] + '">删除</em>' +
                '</div>';
        }
        return _li;
    }
</script>


</body>
</html>